import React, {useMemo} from 'react';
import styled from 'styled-components';
import {ModalProps} from '../Modal';
import useBasisCash from "../../hooks/useBasisCash";
import useApprove, {ApprovalState} from "../../hooks/useApprove";
import {DepoManager} from "../ComponentsManager";
import {decimalToBalance} from "../../basis-cash/ether-utils";
import ImageCommon from "../../assets/image/common/ImageCommon";
import {colors, FishColors, FishInfoCn, FishName, FishDna, getFishCardSrc, getFishCardBg} from "../../common/common";
import {ContainerModal, FlexView, FlexViewBetween, FlexViewCenterColumn, WinView} from "../components";
import useApprove721 from "../../hooks/useApprove721";
import {BigNumber} from "ethers";
import {getDisplayBalance} from "../../utils/formatBalance";
import useModal from "../../hooks/useModal";
import MyFishModal from "./MyFishModal";
import {NavLink, withRouter} from "react-router-dom";

const FishModal: React.FC<ModalProps> = ({onDismiss, coin}) => {
    const basisCash = useBasisCash();
    const [balance, setBalance] = React.useState('');
    const [items, setItems] = React.useState([]);
    const [selectFish, setSelectFish] = React.useState(false);
    const [tab, setTab] = React.useState(0);
    const lp_name = `NYC_${coin}_LP`;
    const pool = basisCash.contracts.Green_NFTRewardPool;
    const [myStake, setMyStake] = React.useState([]);
    const [earned, setEarned] = React.useState("0.0000");
    let fish_id = '';

    React.useEffect(() => {
        if (basisCash) {
            basisCash.getOwnerOf().then(res => {
                console.log(res);
                setItems(res);
            });

            basisCash.NYC.displayedBalanceOf(basisCash.myAccount).then(res => {
                setBalance(res);
            });

            pool.earned(basisCash.myAccount)
                .then((res: BigNumber) => {
                    setEarned(Number(getDisplayBalance(res)).toFixed(4));
                })

            pool.myStake().then((res: any[]) => {
                const arr = res.map((item: any) => {
                    return Number(item).toFixed(0);
                })
                setMyStake(arr)
            })
        }
    }, [basisCash]);

    // 充值lp
    function showRechargeModal(id: string) {
        console.log(id, "fishid")
        fish_id = id;
        basisCash?.externalTokens?.[lp_name]?.displayedBalanceOf(basisCash.myAccount).then(res => {
            DepoManager.show({token: lp_name, displayBalance: res, confirm: rechargeLp, depo: false})
        });
    }

    function rechargeLp(amount: string) {
        console.log(fish_id, "fish_id")
        // console.log(basisCash?.contracts?.FishCardOptions)
        basisCash?.contracts?.FishCardOptions?.lpStake(fish_id, decimalToBalance(amount, 18))
    }

    // 选择鱼
    console.log(myStake, 'mystake')

    function renderTab() {
        switch (tab) {
            case 0:
                return (<AddCard
                    onAdd={() => {
                        setSelectFish(true);
                    }
                    }
                    earned={earned}
                    onClaim={() => {
                        pool.getReward();
                    }
                    }

                ></AddCard>)
            case 1:
                return (<SelectCardCombine>
                </SelectCardCombine>)
            default:

        }
    }

    return (
        <ContainerModal
            // onClick={onDismiss}
        >
            <MyFishCard>
                <MyFishTitHeadCont>
                    <MyFishTitHead>
                        <div></div>
                        <MyFishTit
                            // onClick={() => changeType(1)}
                        >鱼卡质押</MyFishTit>
                        <img
                            src={ImageCommon.img_close}
                            width={18}
                            height={18}
                            onClick={() => {
                                // changeType(0);
                                // onClose()
                                onDismiss();
                            }}
                        />
                    </MyFishTitHead>
                    <MyFishTitDesc>
                        <DescFlex1>
                            <DescFlex2>
                                <DescBtn1>
                                    待兑换NYC
                                </DescBtn1>
                                <DescText>
                                    {/*{Number(earned).toFixed(4)}*/}
                                </DescText>
                            </DescFlex2>
                            <DescFlex2>
                                <DescBtn2>
                                    NYC余额
                                </DescBtn2>
                                <DescText>
                                    {Number(balance).toFixed(4)}
                                </DescText>
                            </DescFlex2>
                        </DescFlex1>
                        <DescFlexRight>
                            <FlexViewCenter>
                                {/*<DescBtn3*/}
                                {/*    onClick={() => setTab(0)}*/}
                                {/*>*/}
                                {/*    我的鱼卡*/}
                                {/*</DescBtn3>*/}
                                {/*<DescBtn3*/}
                                {/*    onClick={() => setTab(1)}*/}
                                {/*>*/}
                                {/*    鱼卡合成*/}
                                {/*</DescBtn3>*/}
                            </FlexViewCenter>
                            <WinView>
                                <SpanRightc
                                    onClick={() => window.open(basisCash.getBuyTokenUrl('USDT/NYC', basisCash?.config?.lavaUrl))}> 前往LAVA进行获取NYC </SpanRightc>
                            </WinView>
                        </DescFlexRight>
                    </MyFishTitDesc>
                </MyFishTitHeadCont>

                <FishConts>
                    {selectFish ? items.map(item => {
                        return (
                            <FishCard
                                item={item}
                            >
                                <SelectBtn
                                    fishData={item}
                                    onStake={() => {
                                        pool.fishStake(item.number);
                                    }}
                                ></SelectBtn>
                                <FishdiBitn onClick={() => {
                                    pool.fishWithdraw(item.number);
                                }}>提取</FishdiBitn>
                                <FishdiBitn onClick={() => {
                                    pool.fishWithdraw(item.number);
                                }}>选择进行合成</FishdiBitn>
                            </FishCard>
                        )
                    }) : renderTab()}
                </FishConts>

                <FishGuize>
                    <FishGuizeTit>规则说明：</FishGuizeTit>
                    <FishGuizeDesc>待领取NYC收益大于等于鱼卡价格时，扣除等值待领取NYC，可兑换成功；</FishGuizeDesc>
                    <FishGuizeDesc>待领取NYC收益小于鱼卡价格时，使用钱包余额补足，可兑换成功；如不够，则无法兑换。</FishGuizeDesc>
                </FishGuize>
            </MyFishCard>
        </ContainerModal>
    )
}
//鱼卡信息
export const FishCard = React.memo(({item, fishStore = false, children}: any) => {
    const [fold, setFold] = React.useState(true);
    return (
        <FishCardsb>
            <FishCardBg
                src={getFishCardBg(item.fishLevel)}
            ></FishCardBg>
            <FishIcon
                src={getFishCardSrc(item.fishTypeNumber, item.fishLevel, item.dna ?? 3)}
            ></FishIcon>

            <FishCSpanTit>{FishInfoCn[FishName[item.fishTypeNumber]]}({FishInfoCn[FishColors[item.fishLevel]]} {fishStore ? "随机" : FishDna[item.dna]})</FishCSpanTit>
            <FishCSpanXian></FishCSpanXian>
            <FlexViewCenter
                onClick={() => setFold(!fold)}
            >
                <FishCSpanYuka>鱼卡信息</FishCSpanYuka>
                <FoldIcon
                    src={fold ? ImageCommon.icon_arrow_down : ImageCommon.icon_arrow_on}
                ></FoldIcon>
            </FlexViewCenter>
            <div
                style={{height: fold ? 0 : "auto", overflow: 'hidden'}}
            >
                <FishYukuai>
                    <FishziConts>
                        <FishZizuo>品质:</FishZizuo>
                        <FishZiyou>
                            {/*<img*/}
                            {/*    src={ImageCommon.img_star}*/}
                            {/*    width={13}*/}
                            {/*    height={13}*/}
                            {/*    style={{marginLeft: 5}}*/}
                            {/*/>*/}
                            {fishStore ? "随机" : FishDna[item.dna] + `(${item.perfect / 100}倍)`}
                        </FishZiyou>
                    </FishziConts>
                    {!fishStore && <FishziConts>
                        <FishZizuo>鱼卡编号:</FishZizuo>
                        <FishZiyou>{item.number}</FishZiyou>
                    </FishziConts>}
                    <FishziConts>
                        <FishZizuo>NYC值:</FishZizuo>
                        <FishZiyou>{item.price}</FishZiyou>
                    </FishziConts>
                    {!fishStore && <FishziConts>
                        <FishZizuo>LP值:</FishZizuo>
                        <FishZiyou>{item.stake}</FishZiyou>
                    </FishziConts>}
                    <FishziConts>
                        <FishZizuo>形态:</FishZizuo>
                        <FishZiyou>{FishInfoCn[FishName[item.fishTypeNumber]]}</FishZiyou>
                    </FishziConts>
                    {!fishStore && <>
                        <FishziConts>
                            <FishZizuo>头部:</FishZizuo>
                            <FishZiyou>{FishInfoCn[FishName[item.a]]}</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>身体:</FishZizuo>
                            <FishZiyou>{FishInfoCn[FishName[item.b]]}</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>鱼鳍:</FishZizuo>
                            <FishZiyou>{FishInfoCn[FishName[item.c]]}</FishZiyou>
                        </FishziConts>
                        <FishziConts>
                            <FishZizuo>尾部:</FishZizuo>
                            <FishZiyou>{FishInfoCn[FishName[item.d]]}</FishZiyou>
                        </FishziConts>
                    </>}
                    {/*<SelectBtn*/}
                    {/*    fishData={item}*/}
                    {/*    onStake={() => {*/}
                    {/*        pool.fishStake(item.number);*/}
                    {/*    }}*/}
                    {/*></SelectBtn>*/}
                    {/*<FishdiBitn onClick={() => {*/}
                    {/*    pool.fishWithdraw(item.number);*/}
                    {/*}}>提取</FishdiBitn>*/}
                    {/*<FishdiBitn onClick={() => {*/}
                    {/*    pool.fishWithdraw(item.number);*/}
                    {/*}}>选择进行合成</FishdiBitn>*/}
                </FishYukuai>
            </div>
            <FlexViewCenterColumn>
                {children}
            </FlexViewCenterColumn>
        </FishCardsb>
    )
})
const SelectBtn = React.memo(({fishData, onStake}: any) => {
    const basisCash = useBasisCash();
    const contract = basisCash.contracts?.["Green_NFTRewardPool"];
    const [approveStatus, approve] = useApprove721("", contract.address, fishData.number);
    return (

        approveStatus == ApprovalState.NOT_APPROVED
            ?
            <FishdiBitn onClick={() => {
                approve()
            }}>授权</FishdiBitn>
            :
            <FishdiBitn
                onClick={onStake}
            >质押</FishdiBitn>
    )
})
const AddCard = React.memo(({
                                onAdd = () => {
                                }, earned, onClaim = () => {
    }, onWidthDraw = () => {
    }
                            }: any) => {

    return (
        <AddCardView>
            <AddWrap
                onClick={onAdd}
            >
                <AddIcon
                    src={ImageCommon.icon_add}
                ></AddIcon>
                <AddTitle>点击添加鱼卡质押</AddTitle>
            </AddWrap>
            <div>我的收益：{earned}</div>
            {/*<FishdiBitn>质押</FishdiBitn>*/}
            <FishBtnBorder
                onClick={onClaim}
            >领取收益(NYC)</FishBtnBorder>
        </AddCardView>
    )
})
const SelectCardCombine: React.FC = React.memo(({
                                                    selectFish = () => {
                                                    }, onSelectFinish = () => {
    }
                                                }: any) => {
    const [onSelectFishModal] = useModal(<MyFishModal coin={"USDT"}/>);

    function onFinish() {

    }

    function onFinish1() {

    }

    function onFinish2() {

    }

    return (
        <FlexViewBetween>
            <SelectCard
                onAdd={() => {
                    selectFish(0)
                    onSelectFishModal();
                }}
                onSelectFinish={onFinish1}
            ></SelectCard>
            <SelectCard
                onAdd={() => {
                    selectFish(1)
                }}
                onSelectFinish={onFinish2}
            ></SelectCard>
        </FlexViewBetween>
    )
})
// 选择鱼卡
const SelectCard = React.memo(({
                                   onAdd = () => {
                                   }, earned, onClaim = () => {
    }, onWidthDraw = () => {
    }
                               }: any) => {

    return (
        <AddCardView>
            <AddWrap
                onClick={onAdd}
            >
                <AddIcon
                    src={ImageCommon.icon_add}
                ></AddIcon>
                <AddTitle>点击选择鱼卡</AddTitle>
            </AddWrap>
        </AddCardView>
    )
})
const FishCardBg = styled.img`
    position: absolute;
     top: 0;
      left: 0;
      bottom:0;
       z-index: -1;
       height:100%;
       width:100%;
`
const FishIcon = styled.img`
    position:relative;
    top: -36px;
    border-radius:30px;
    width:160px;
     @media (max-width: 768px) {
        width:100px;
   };
`
const FoldIcon = styled.img`
    width:15px;
    height:auto;
    margin-left:5px;
`
const FlexViewCenter = styled.div`
   display:flex;
   align-items:center;
   justify-content:center;
`
const AddCardView = styled(FlexViewCenter)`
    flex-direction:column;
    width: 230px;
    box-shadow: 0px 0px 10px 0px ${colors.main};
    border-radius: 20px;
     @media (max-width: 768px) {
        width: 80%;
    };
`
const AddWrap = styled(FlexViewCenter)`
    flex-direction:column;
    width: 190px;
    height: 120px;
    border: 1px dashed ${colors.main};
    border-radius: 20px;
`
const AddIcon = styled.img`
    width:50px;
    height:50px;
`
const AddTitle = styled.div`
    font-size: 18px;
    font-weight: bold;
    color: ${colors.main};
    margin-top:10px;
`
const PageShows = styled.div`
    position:  fixed;
    z-index: 10;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.5);
`

export const MyFishCard = styled.div`
    width: 100%;
    max-width: 800px;
    height: 920px;
    background: #FFFFFF;
    border-radius: 20px;
    @media (max-width: 768px) {
        width:80%;
        height: 80%;
   };
`

const MyFishTitHeadCont = styled.div`
    width: 100%;
    background: linear-gradient(0deg, #F27405, #FFA82B);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 0 17px;
`

const MyFishTitDesc = styled.div`
    height: 110px;
    margin: 0 18px;
    background: #D26300;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    display:flex;
`

const DescFlex1 = styled.div`
display:flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;

`

const DescFlexRight = styled.div`
display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    margin-right: 20px;
`

const DescFlex2 = styled.div`
display:flex;
flex-direction: row;
align-items: center;
`

export const DescBtn1 = styled.div`
    width: 110px;
    line-height: 30px;
    text-align: center;
    background: #FFBB7F;
    border-radius: 15px;
    font-size: 16px;
    font-family: PingFang SC;
    color: #FFFFFF;
    margin-left: -9px;
    @media (max-width: 768px) {
        width: 80px;
        line-height: 25px;
        font-size: 14px;
   };
`

export const DescBtn2 = styled(DescBtn1)`
    background: #96CAFF;
`
export const NavBtnView = styled.div`
    width: 110px;
    line-height: 30px;
    background: #FFBB7F;
    border-radius: 15px;
    text-align: center;
    font-size: 16px;
    font-family: PingFang SC;
    color: #FFFFFF;
    margin-left: -9px;
    cursor:pointer;
`

const DescText = styled.div`
margin-left: 9px;
font-size: 24px;
font-family: PingFang SC;
color: #FFFFFF;
`

const MyFishTitHead = styled.div`
width: 100%;
height: 56px; 
display:flex;
flex-direction: row;
justify-content:space-between;
align-items: center;
`

const MyFishTit = styled.span`
line-height: 56px;
font-size: 20px;
font-family: FZCuYuan-M03S;
font-weight: 400;
color: #FFFFFF;
`

const SpanRightc = styled.span`
line-height: 18px;
font-size: 16px;
font-family: PingFang SC;
text-decoration: underline;
color: #FFFFFF;
margin-top: 15px;
`

export const FishConts = styled.div`
width: 100%;
max-height: 605px; 
padding: 21px 35px;
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
overflow-y: auto;
@media (max-width: 768px) {
        max-height:50%;
   };
`

const FishCardsb = styled.div`
    width: 230px;
    position: relative;
    margin-top: 51px;
    display:flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    z-index:0;
    padding-bottom:30px;
`

const FishCSpanTit = styled.span`
margin-top: 10px;
text-align: center;
line-height: 18px;
font-size: 18px;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
`

const FishCSpanXian = styled.div`
width:100%;
border-bottom: 1px dashed #ffffff;
margin-top: 12px; 
margin-bottom:12px;
`

const FishCSpanYuka = styled.span`
text-align: center;
line-height: 14px;
font-size: 14px;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
`

const FishYukuai = styled.div`
width: 190px;
background: rgba(255,255,255,0.42);
margin-top: 11px;
padding: 10px 0;
`

const FishziConts = styled.div`
display: flex;
flex: 1;
`

const FishZizuo = styled.div`
display: flex;
flex: 1;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 20px;
text-align: right;
flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10px;
`

const FishZiyou = styled.div`
display: flex;
flex: 1;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
line-height: 20px;
text-align: left;
flex-direction: row;
    justify-content: end;
    align-items: center;
    padding-right: 10px;
`

export const FishdiBitn = styled.div`
    text-align: center;
    width: 160px;
    line-height: 36px;
    background: ${colors.main};
    color:${colors.white};
    border-radius: 18px;
    font-size: 14px;
    font-weight: bold;
    margin-top: 20px;
    cursor:pointer;
`
export const FishBtnBorder = styled(FishdiBitn)`
    background: ${colors.white};
    color:${colors.main};
    border: 2px solid ${colors.main};
`
export const FishGuize = styled.div`
    height: 90px;
    background: #FFEFE3;
    border-radius: 10px;
    margin: 20px 35px;
    padding: 5px 16px;
   @media (max-width: 768px) {
        height: auto;
   };
`

export const FishGuizeTit = styled.div`
font-size: 18px;
font-family: PingFang SC;
font-weight: bold;
color: #F27405;
@media (max-width: 768px) {
        font-size: 14px;
   };
`

export const FishGuizeDesc = styled.div`
font-size: 16px;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
line-height: 24px;
white-space: pre-line;
text-align:left;
@media (max-width: 768px) {
        font-size: 12px;
        line-height: 14px;
   };
`

const Zhiya = styled.span`
width: 42px;
text-align: center;
background: #F27405;
border-radius: 8px;
line-height: 18px;
font-size: 12px;
margin-left: 2px;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
`

const ZhiyaContCard = styled.div`
width: 230px;
height: 260px;
background: #FFFFFF;
box-shadow: 0px 0px 10px 0px #FFE4CC;
border-radius: 20px;
display: flex;
flex-direction: column;
    justify-content: end;
    align-items: center;
`

const ZhiyaPosi = styled.div`
position: relative;
width: 191px;
margin-top: 20px;
`

const Zhiyapip = styled.div`
position: absolute;
width: 131px;
line-height: 32px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
left: 30px;
top: 0;
background: #000000;
color: #FFFFFF;
text-align: center;
`

const ZhiyaBtnzy = styled.div`
width: 160px;
background: #F27405;
border-radius: 18px;
line-height: 36px;
font-size: 16px;
font-family: PingFang SC;
color: #FFFFFF;
text-align: center;
margin-top: 20px;
`

const ZhiyaTiquBtn = styled.div`
width: 160px;
border: 1px solid #F27405;
border-radius: 18px;
line-height: 36px;
font-size: 16px;
font-family: PingFang SC;
color: #F27405;
text-align: center;
margin-top: 10px;
`

const Xiaotan1 = styled.div`
position: fixed;
    z-index: 89;
    top: 50%;
    left: 50%;
    margin: -20% 0 0 -150px;
width: 300px;
z-index: 100;
background: #fff;
border-radius: 10px;
`

const XiaotanSpan = styled.div`
font-size: 18px;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
`

const XiaotanDivCon = styled.div`
display: flex;
flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    padding: 0 30px;
`

const XiaotanDivCon1 = styled.div`
display: flex;
flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    padding: 0 30px;
`

const XiaotanDivCon2 = styled.div`
display: flex;
flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    padding: 0 30px;
`

const XiaotanTishi = styled.span`
font-size: 12px;
font-family: PingFang SC;
font-weight: 500;
color: #F27405;
text-alingn: right;
margin-top: 5px;
padding: 0 30px;
`

const XiaotanTishiTexr = styled.div`
font-size: 18px;
line-height: 30px;
font-family: PingFang SC;
font-weight: 500;
color: #F27405;
text-alingn: right;
margin-top: 16px;
padding: 0 30px;
`

const XiaotanTishiTexr1 = styled.div`
font-size: 16px;
font-family: PingFang SC;
font-weight: 500;
color: #000000;
text-alingn: right;
margin-top: 5px;
padding: 0 30px;
`

const XiaotanBtns1 = styled.div`
width: 160px;
line-height: 36px;
background: #F27405;
border-radius: 18px;
font-size: 16px;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
text-align: center;
margin-top: 5px;
margin-bottom: 20px;
`

const XiaotandivFlex = styled.div`
display: flex;
flex-direction: row;
    justify-content: center;
    align-items: center;
`
export default FishModal;
